<template>
  <div class="container">
    <nlfl-components :handleJkflbh="accepteJkflbh"></nlfl-components>
    <div class="right">
      <!-- <div class="right-title">能力列表</div> -->
      <!-- 搜索功能 -->
      <div class="search">
        <div class="search-left">
          <el-input class="search-input" v-model="form.filter.jkmc" placeholder="关键字检索"></el-input>
          <el-button class="ml20" @click="changePageNum(1)" type="primary" slot="append">查询</el-button>
        </div>
        <div class="search-right">
          <!-- :disabled="multiple" -->
          <button class="btn_operation_add" @click="batchRemove">
            <i class="el-icon-delete"></i>
            批量移除
          </button>
          <button class="btn_operation_add" @click="addNl">
            <img src="~@/assets/img/grzx/add.png" alt />
            添加能力
          </button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-style">
        <template>
          <el-table
            ref="table"
            @sort-change="sortChange"
            :data="nllbTableData"
            tooltip-effect="dark"
            style="width: 100%;min-height: 850px;"
            @selection-change="handleSelectionChange"
          >
            <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
            <el-table-column sortable="custom" prop="jkmc" label="能力名称">
              <template v-slot="{ row }">
                <div class="link" @click="enterInfo(row)">{{ row.jkmc }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="jkflbh" label="类目" width="150" show-overflow-tooltip></el-table-column> -->
            <el-table-column prop="jkms" label="概述" show-overflow-tooltip></el-table-column>
            <el-table-column prop="fbzt" label="状态" width="120"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-link type="primary" @click="removeConfirm(scope.row)">
                  <!-- <i class="el-icon-delete"></i> -->
                  移除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="page">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              background
              @size-change="changePageSize"
              @current-change="changePageNum"
              :current-page="form.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="form.pageSize"
              :total="total"
            ></el-pagination>
          </div>
          <!-- 接口定义弹框 -->
          <jkdy-dialog-component ref="jkdyDialogComponent" @updateTable="changePageNum(1)"></jkdy-dialog-component>
        </template>
      </div>
    </div>
    <div style="clear:both"></div>
  </div>
</template>
<script>
import jkglService from '@/api/jkgl'
import nlflComponents from './components/nlfl.vue'
import jkdyDialogComponent from './dialogs/add-jk-dialog.vue'

export default {
  components: { nlflComponents, jkdyDialogComponent },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 20,
        orderBy: '',
        filter: {
          cjrymc: '',
          jkflbh: '',
          jkmc: '',
          jkms: '',
        },
      },
      total: 0,
      // 能力列表表格数据
      nllbTableData: [],
      // 能力选择框
      nlSelection: [],
      // 非多个禁用
      multiple: true,
    }
  },
  mounted() {
    this.changePageNum(1)
  },
  methods: {
    /*
     * 获取能力列表
     */
    getTable() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      const params = this.form
      jkglService
        .queryJkdy(params)
        .then((res) => {
          this.nllbTableData = res.list
          this.total = res.total
          loading.close()
        })
        .catch((err) => {
          !err.isError && this.$message({ type: 'warning', message: err.message })
        })
    },
    /*
     * 分页
     */
    changePageNum(val) {
      this.form.pageNum = val
      this.getTable()
    },
    /*
     * 分页
     */
    changePageSize(val) {
      this.form.pageSize = val
      this.form.pageNum = 1
      this.getTable()
    },
    /*
     * 打开添加能力弹框
     */
    addNl() {
      this.$refs.jkdyDialogComponent.openDialog(this.form.filter.jkflbh)
    },
    /**删除能力前确认 */
    removeConfirm(val) {
      this.$confirm(`确定移除${val.jkmc}能力?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //先清空再赋值
          this.nlSelection = []
          this.nlSelection.push(val.jkbh)
          this.remoeNl()
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
        })
    },
    /*
     * 批量移出能力
     */
    remoeNl() {
      const params = { jkbhList: this.nlSelection }
      jkglService
        .clearJkdyfl(params)
        .then((res) => {
          this.$message({ type: 'success', message: '删除能力成功!' })
          this.changePageNum(1)
        })
        .catch((err) => {
          !err.isError && this.$message({ type: 'warning', message: err.message })
        })
    },
    /** 获取子组件的传入的接口编号 */
    accepteJkflbh(data) {
      this.form.filter.jkflbh = data
      this.changePageNum(1)
    },
    /** 处理多选框 */
    handleSelectionChange(val) {
      this.nlSelection = val.map((item) => item.jkbh)
      this.multiple = !this.nlSelection.length
    },
    /**批量移除 */
    batchRemove() {
      if (!this.nlSelection.length) {
        this.$message({ type: 'error', message: '请选择移除的能力' })
      } else {
        this.$confirm(`确定批量移除？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.remoeNl()
          })
          .catch(() => {
            this.$message({ type: 'info', message: '已取消删除' })
          })
      }
    },
    /*
     * 查看详情
     */
    enterInfo(data) {
      this.$router.push({
        path: '/nlxq',
        query: {
          cs: data.jkbh,
        },
      })
    },
    /* 排序变化 */
    sortChange({ prop, order }) {
      switch (order) {
        case 'descending':
          // desc jkmc
          this.form.orderBy = 'jkmc DESC'
          break
        case 'ascending':
          // asc jkmc
          this.form.orderBy = 'jkmc'
          break
        default:
          this.form.orderBy = ''
          break
      }
      this.form.pageNum = 1
      this.getTable()
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: #fff;
  border: 1px solid #cecece;
  // overflow: hidden;
  padding: 20px;

  .right {
    width: calc(100% - 380px);
    float: left;
    margin-left: 30px;

    .right-title {
      font-size: 24px;
      font-family: "MicrosoftYaHei";
      text-align: left;
      padding: 7px 0px 7px 0px;
    }

    .search {
      width: 100%;
      // text-align: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 55px;
      // border-bottom: 1px solid #cecece;

      .search-input {
        width: 440px;
        height: 34px;
      }

      .search-select {
        width: 120px;
      }
    }

    .table-style {
      margin-top: 5px;
    }
  }

  .page {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.link {
  color: #4084f0;
  text-decoration: underline;
  cursor: pointer;
}
</style>
